<template>
  <div class="order-container">
  <el-table
    :data="tableData"
    style="width: 100%" header-cell-style="background-color:#D7FFF0;color:black">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称" >
            <span>{{ props.row.goodname }}</span>
          </el-form-item>
          <el-form-item label="支付方式">
            <span>{{ props.row.paytype }}</span>
          </el-form-item>
          <el-form-item label="商品 ID" >
            <span>{{ props.row.goodId }}</span>
          </el-form-item>
          <el-form-item label="商品价格" >
            <span>{{ props.row.goodprice }}</span>
          </el-form-item>
          <el-form-item label="商品分类" >
            <span>{{ props.row.goodcategory }}</span>
          </el-form-item>

          <el-form-item label="订单创建时间" >
            <span>{{ formatDate(props.row.createtime) }}</span>
          </el-form-item>
          
          <el-form-item label="商品描述" >
            <span>{{ props.row.gooddescription }}</span>
          </el-form-item>
          <el-form-item  label="是否购买" >
              <span>{{props.row.shopstatic==1?"已购买":"未支付"}}</span>
          </el-form-item>
          <el-form-item label="操作">
            <!-- <el-button type="danger" size="mini" @click="Deleteorder(props.row.id)">删除</el-button> -->




            <el-popconfirm
                    confirm-button-text="好的"
                    cancel-button-text="不用了"
                    icon="el-icon-info"
                    icon-color="red"
                    title="你确定移除该订单吗？"
                    @confirm="Deleteorder(props.row.id)"
                  >
                    <el-button slot="reference" type="danger" size="medium" style="margin-top: 20px;">移除订单</el-button>
                    
                  </el-popconfirm>
                  <el-button v-if="props.row.shopstatic==0" type="primary" size="medium" style="margin-left: 20px;"  @click="showPaymentDialog=true">去支付</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="商品 ID"
      prop="goodId" calss="column-header">
    </el-table-column>
    <el-table-column
      label="商品名称"
      prop="goodname" calss="column-header">
    </el-table-column>
    <el-table-column
      label="商品分类"
      prop="goodcategory" calss="column-header">
    </el-table-column>
  </el-table>





  <!-- 支付表单 -->
  <el-dialog title="支付" :visible.sync="showPaymentDialog" width="30%">
    <div>
      <p>账户余额：￥{{user.money }}</p>
      <p>需要支付：￥{{ game.price }}</p>
      
    </div>
    <span slot="footer" class="dialog-footer">
      <!-- <el-button type="success" v-if="user.money >= game.price" @click="toPay(user.id),changeIsPurchased(game.id) ">确认支付</el-button> -->
      <el-button type="success" v-if="parseInt(user.money) >= parseInt(game.price)" @click="toPay(user.id),joinshopCar(),topayboss(game.busId),changeOrderstatic(user.id)">确认支付</el-button>
      <p v-else>余额不足，请<a href="/recharge">前往充值</a></p>
      <p  v-if="paymentStatus === 'success'" >购买完成！</p>
      <el-button type="danger" @click="showPaymentDialog=false">取消</el-button>
    </span>
  </el-dialog>
</div>



</template>



<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-form--inline .el-form-item__label {
   font-size: 14px;
   font-weight: bold;
   color: #000000;
}
.order-container .el-table__body td {
  background-color: #DDF3FF;
}


</style>








<!--   <script>
    export default {
      data() {
        return {
          activeNames: ['1']
        };
      },
      methods: {
        handleChange(val) {
          console.log(val);
        }
      }
    }
  </script> -->









  <script>
import request from '@/request/request.js';
  
  export default {
    data() {
      return {
        game: localStorage.getItem("game") ? JSON.parse(localStorage.getItem("game")) : {},
        shop: localStorage.getItem("shop") ? JSON.parse(localStorage.getItem("shop")) : {},
        user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
        order: localStorage.getItem("order") ? JSON.parse(localStorage.getItem("order")) : [],
        tableData: [],
        Games: {},
        showPaymentDialog: false,
      }
    },
  methods:{
    topayboss(id) {
          request.get("/user/" + id).then((res) => {
          if (res.code === "0") {
            this.usermoney= this.user.money ;
          }
        });
          const money = parseInt(this.usermoney) + parseInt(this.game.price);
            request.put(`/user/${id}/pay?money=${money}`).then((res) => {
                if (res.code === "0") {
                    this.$message.success({ message: "支付成功", type: "success" });
                } else {
                    this.$message({ message: "支付失败", type: "error" });
                }
            });

        },
    toPay(id) {
          const money = this.user.money - this.game.price;
            request.put(`/user/${id}/pay?money=${money}`).then((res) => {
                if (res.code === "0") {
                    this.paymentStatus = 'success';
                    this.showPaymentDialog = false;
                    this.selectUser(id);
                    
                    this.$message.success({ message: "支付成功", type: "success" });
                } else {
                    this.$message({ message: "支付失败", type: "error" });
                }
            });
        },
        selectUser(id) {
          request.get("/user/" + id).then((res) => {
        if (res.code === "0") {
          this.user = {...this.user, ...res.data};
          localStorage.setItem("user", JSON.stringify(this.user));
        }
          });
        },
        joinshopCar(){
      this.Games.game_name = this.game.game_name;
      this.Games.game_image = this.game.game_image;
      this.Games.price = this.game.price;
      this.Games.gameId = this.game.id;
      this.Games.userId = this.user.id;
      this.Games.game_description = this.game.game_description;
      this.Games.category = this.game.category;
      this.Games.release_date = this.game.release_date;
      this.Games.is_purchased = 1;
      this.Games.busId = this.game.busId;
      this.Games.url=this.game.url;
      request.post("/shop/add" ,this.Games).then((res) => {
        if (res.code === "0") {
          this.changeOrder(this.game.id);
          window.location.reload();
        }
      });
    },
  
    changeOrderstatic(id){
  request.get("/order/change/static/" + id).then((res) => {
    if (res.code === "0") {
      this.$message.success({ message: "订单状态修改成功", type: "success" });
    }
  });
},
changeOrder(id) {
            request.get("/order/change/purchased/" + id).then((res) => {
                if (res.code === "0") {
                    this.message.success({ message: "购买成功", type: "success" });
                  }
                });

        },
    formatDate(date) {
      return new Date(date).toLocaleString();
    },
    getOrder(id){
  request.get("/order/user/"+id).then((res) => {
    if (res.code === "0") {
      this.tableData = res.data;
      localStorage.setItem("order", JSON.stringify(res.data));
      console.log(this.tableData);
    }
  });
},
Deleteorder(id){
  request.delete("/order/"+id).then((res) => {
    if (res.code === "0") {
      this.getOrder(this.user.id);
    }
  });

},
  },
  created() {
    this.getOrder(this.user.id);
  },
  }
</script>